
import React from 'react';

// 引入组件
import MyHeader from "../../components/home/MyHeader"
import MySwiper from "../../components/index/MySwiper"
import MyEntry from "../../components/home/MyEntry"
import MySecKill from "../../components/home/MySecKill"
import WorthBuying from "../WorthBuying"
// 引入样式
import "../../styles/home/MyHome.css"
// 引入请求函数
import { IndexBanner } from "../../api/home"


class Home extends React.Component {
  constructor() {
    super()
    this.state = {
      HomeSwiper: [""]
    }
  }

  async componentDidMount() {
    var res = await IndexBanner()
    console.log(res);
    this.setState({HomeSwiper:res.data.list})
  }

  render() { //负责组件的渲染( 只要当前组件渲染一次, render方法必定会调用一次 )
    //console.log(this);//他会打印两次，原因是在index.js中有一个严格模式，可以放大错误
    return (
      <div className="home">
        {/* 渲染头部(搜索框组件) 使用组件(并没有注册)*/}
        <MyHeader></MyHeader>
        {/* 注意:这里组件的标签名首字母必须大写,为了与html标签做个区分 */}

        {/* 轮播图组件 */}
        <MySwiper swperlist={this.state.HomeSwiper}></MySwiper>

        {/* 快捷入口组件 */}
        <MyEntry></MyEntry>

        {/* 秒杀组件 */}
        <MySecKill></MySecKill>

        {/* 值得购买 */}
        <WorthBuying></WorthBuying>
      </div>
    );
  }
}

export default Home;

